<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当前模拟设备运行数据</title>
    <link href='../static/css/base.css' rel='stylesheet'>
    <link href='../static/css/form.css' rel='stylesheet'>
    <script src="{{url_for('static',filename='js/jquery-3.6.1.js')}}" type="text/javascript" charset="utf-8"></script>
    <script src="{{url_for('static',filename='js/jquery.cookie-1.4.1.min.js')}}" type="text/javascript"
            charset="utf-8"></script>
</head>


<body>
<div class="start">

    <div class="back" onclick="window.location.href='{{url_for('home')}}'"><img class="back-icon" src="../../static/img/back.png">返回主页
            </div>
    <div class="right">
            <div class="menu-item config-menu" >
                <form action="{{ url_for('allfromPost') }}" method="POST" >
                    <div class="card-header">
                    查询模拟设备编号
                </div>

                <input type="text" name="value" value={{value}}>
                <input  type="submit" value="查询">

                </form>
            </div>


            <div class="card-box">
                <div class="card-header">
                    当前状态
                </div>
                <div class="card-body" id="baseConfig">

                </div>
            </div>

    </div>
</div>
</body>
<script>
    $(function () {
        var logiName = $.cookie('loginName');
        if ($.trim(logiName) != '') {
            $(".title1").text(logiName + ",您好!")
        }

        //表单每行数量 css未做配置，暂时只支持3个
        var formRow = 3;
        var baseConfig = [
            {
                label: '模拟设备编号',
                name: 'number',
                type: ''
            },
            {
                label: 'A相电压(V)',
                name: 'voltageA',
                type: ''
            },
            {
                label: 'B相电压(V)',
                name: 'voltageB',
                type: ''
            },
            {
                label: 'C相电压(V)',
                name: 'voltageC',
                type: ''
            },
            {
                label: 'A相电流(I)',
                name: 'currentA',
                type: ''
            },
            {
                label: 'B相电流(I)',
                name: 'currentB',
                type: ''
            },
            {
                label: 'C相电流(I)',
                name: 'currentC',
                type: ''
            },
            {
                label: '当前A相电压偏差(V)',
                name: 'voltageA_deviation',
                type: ''
            },
            {
                label: '单位时间A相电压最大偏差(V)',
                name: 'max_voltageA_deviation',
                type: ''
            },
            {
                label: '当前B相电压偏差(V)',
                name: 'voltageB_deviation',
                type: ''
            },
            {
                label: '单位时间B相电压最大偏差(V)',
                name: 'max_voltageB_deviation',
                type: ''
            },
            {
                label: '当前C相电压偏差(V)',
                name: 'voltageC_deviation',
                type: ''
            },
            {
                label: '单位时间C相电压最大偏差(V)',
                name: 'max_voltageC_deviation',
                type: ''
            },
            {
                label: '单位时间A相电压波动(%)',
                name: 'voltageA_change',
                type: ''
            },
            {
                label: '单位时间A相电压波动次数(次)',
                name: 'voltageA_change_num',
                type: ''
            },
            {
                label: '单位时间B相电压波动(%)',
                name: 'voltageB_change',
                type: ''
            },
            {
                label: '单位时间B相电压波动次数(次)',
                name: 'voltageB_change_num',
                type: ''
            },
            {
                label: '单位时间C相电压波动(%)',
                name: 'voltageC_change',
                type: ''
            },
            {
                label: '单位时间C相电压波动次数(次)',
                name: 'voltageC_change_num',
                type: ''
            },
            {
                label: '公网电网间谐波(%)',
                name: 'interharmonic_ratio',
                type: ''
            },
            {
                label: '公网电网谐波(%)',
                name: 'harmonic_content',
                type: ''
            },
            {
                label: '频率合格率(%)',
                name: 'frequency_change',
                type: ''
            },
            {
                label: '三相不平衡(%)',
                name: 'no_balance',
                type: ''
            },
        ]


        var formatList = function (config){
            var configList = []
            config.forEach(function (item, i) {
                if (configList[Math.floor(i / formRow)]) {
                    configList[Math.floor(i / formRow)].push(item)
                } else {
                    configList.push([item])
                }
            })
            return configList
        }

        var setBaseForm = function () {
            var baseConfigList = formatList(baseConfig)
            var baseConfigDom = ''
            baseConfigList.forEach(function (item) {
                var rowDom = ''
                item.forEach(function (ele, i) {
                    rowDom = rowDom + `<div class="form-item col col-6` + (i % formRow === 0 ? '' : ' offset-3') + `">
                              <div class="form-item-label">` + ele.label + `</div>
                              <input placeholder="` + ele.label + `" type="` + (ele.type || 'text') + `" name="` + ele.name + `">
                          </div>`
                })
                baseConfigDom = baseConfigDom + `<div class="row">` + rowDom + `</div>`
            })
            $('#baseConfig').html(baseConfigDom)
        }




        setBaseForm()


         $.ajax({
            url: "/configdata",
            type: "get",
            dataType: "json",
            success: function (data) {
                for(var key in data){
                    if(key == "Dname"){
                        var deviceData = data[key];
                        for(var i=0;i<deviceData.length;i++){
                            var item = deviceData[i];
                            for(var itemkey in item){
                                 var selector = "input[name='Dname["+i+"]."+itemkey+"']";
                                 $(selector).val(item[itemkey])
                            }
                        }
                    }else {
                        var selector = "input[name='"+key+"']";
                        $(selector).val(data[key])
                    }
                }

            },
            error: function (msg) {
                // alert("ajax连接异常：workstatusremarks");
            }
        });

    })


</script>

<style>
    .menu-item {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .menu-item:hover .button{
        border: 8px solid #52ff58;
    }

    .menu-item-text {
        color: #333;
        font-size: 1.4vw;
        margin-left: 20px;
    }
    .button {
        background-image: linear-gradient(to bottom right, #77d9ee, #4c54f2);
        width: 4vw;
        height: 4vw;
        border-radius: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.4vw;
        box-shadow: 0 8px 24px #bbc3e0, 0 16px 56px #bbc3e0, 0 5px 5px #bbc3e0;
        border: 8px solid #e7e8eb;
        cursor: pointer;
    }
    .config-menu{
        margin-bottom: 10px;
    }
    .config-menu .button{
        margin: 0;
        border-radius: 8px;
        max-height: 50px;
        max-width: 50px;
    }
    .config-menu .menu-item-text{
        margin-left: 10px;
    }
</style>

</html>